<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<!-- 有健康顾问的情况下 -->
			<view class="" v-show="!showFlag">
				<dev-navbar title="我的顾问"></dev-navbar>
				<!-- 顾问信息 -->
				<view class="justify-content-l consultant-information">
					<dev-svg-image  mode="image" :imageUrl="counselorList.adviserAvatarUrl != null ? counselorList.adviserAvatarUrl : 'shoppingMall/7BE1BC153AE54312B03DF6222F13EA9A.png'"
						width="255" height="357" radius="20"></dev-svg-image>
					<view class="right-data">
						<dev-svg-image  @tap="makePhoneCall(counselorList.phone)" class="phoen-icon" mode="image" imageUrl="http://static.bsyjk.cn/phone/A0D361AC92634140B61CEB056E5BBCF4.png"
									   width="60" height="60" radius="30">
						</dev-svg-image>
						<view class="full-name">
							{{counselorList.adviserNickName}}
						</view>
						<view class="store-address">
							{{counselorList.storeName}}
						</view>
						<view class="job-information">
							{{counselorList.remark != null ? counselorList.remark : ''}}
						</view>
						<view class="align-items-l">
							<dev-svg-image v-if="counselorList.address" width="30" height="30" svgName="location" modifyColor="#CDCDCE">
							</dev-svg-image>
							<text class="job-information">{{counselorList.address || ''}}</text>
						</view>

						<!-- 服务数据 -->
						<view class="service-data">
							<view class="in-every-particular">
								<view class="">
									<text class="score">{{counselorList.satisfaction}}</text><text class="company">分</text>
								</view>
								<view class="service-type">
									满意度
								</view>
							</view>

							<view class="in-every-particular">
								<view class="">
									<text class="score">{{counselorList.helpFamilyNum}}</text><text class="company">人</text>
								</view>
								<view class="service-type">
									帮助家人
								</view>
							</view>

							<view class="in-every-particular">
								<view class="">
									<text class="score">{{counselorList.workingTime}}</text><text class="company">年以内</text>
								</view>
								<view class="service-type">
									从业时间
								</view>
							</view>

						</view>

					</view>
				</view>
				<dev-split-line height="20" bgColor="#f5f5f5" ></dev-split-line>
				<!-- 获得证书 -->
				<view class="certificate-management">
					<view class="certificate-title">
						获得证书
					</view>
					<!-- 每项证书 -->
					<view class="certificate-list" v-if="certificates.length>0">
						<view class="each-certificate" v-for="(item,index) in certificates" :key="index">
							<dev-svg-image mode="image" :imageUrl="item.cover" width="95" height="80"  ></dev-svg-image>
							<view class="certificate-name">
								{{item.text}}
							</view>
						</view>
					</view>
					<nodata v-else></nodata>
				</view>

				<dev-iphone-bottom v-show="acceptFlag">
					<dev-button width="654" height="90" radius="45" left="48" top="20" bottom="20"  @tap="addAdviserUser(counselorList.adviserId)">接受他/她作为健康顾问</dev-button>
				</dev-iphone-bottom>
			</view>

			<!-- v-if="counselorList.length ==0" -->
			<view v-if="showFlag" style="background: #FDF3DE;">
				<dev-navbar @information="information" bg-color="none" title="我的顾问">
					<!-- 特殊背景自定义 -->
					<template slot="bottom">
						<view class="custom-background">
							<view class="false-background"
								:style="{'height':`${navAllHeight}px`,'background-size':`100% ${navAllHeight+247}px`}">
							</view>
							<view :style="{'height':`${navAllHeight}px`}"></view>
							<view class="" style="height:247px;"></view>
						</view>
					</template>
				</dev-navbar>
				<!-- 推荐门店 -->
				<view class="recommend-md">
					<view class="recommend-title">
						推荐门店
					</view>
					<scroll-view scroll-x="true" class="recommend-scroll">
						<view v-for="(item,idx) in shopList" :key="idx" class="shop-view"
							:class="shopList.length ==1?'width621':''" @tap="navMajor(item)">
							<u-lazy-load border-radius="10" height="343" img-mode="aspectFill"
								:image="item.backgroundImage||'http://static.bsyjk.cn/bsy/2F15AF3A8A954965A52FF37F36C73B96.png'">
							</u-lazy-load>
							<view class="shop-popup" :class="shopList.length ==1?'width621':''">
								<view class="shop-dz ellipsis">
									<view class="drees-imgs">
										<image src="http://static.bsyjk.cn/l/93D478F878D24B1FA23F7C49264B723A.png"
											style="width: 22upx;height: 30upx;" mode=""></image>
									</view>
									<view class="drees-texts">
<!--										{{item.provinceName}}{{item.cityName}}{{item.countyName}}-->
										{{item.storeName}}
									</view>
								</view>
							</view>
						</view>
						<view style="width: 50upx;height: 100upx;display: inline-block;">
						</view>
					</scroll-view>
				</view>
				<!-- 查找顾问 -->
				<view class="find-consultants">
					<input class="input-box" v-model="phone" placeholder="请输入健康顾问的手机号码"  maxlength="11" type="number">
					<dev-button width="466" height="80" bgColor="#F5A623" radius="45" left="67" top="44" fontSize="34" @tap="selectAdvice">
						查找健康顾问
					</dev-button>
				</view>

				<!-- 说明 -->
				<view class="explain-view">
					<block v-for="(item,idx) in explainList" :key="idx">
						<view class="explain-f">
							<image class="explain-num" :src="item.image"></image>
							<view class="explain-cview">
								<view class="explain-title">
									{{item.title}}
								</view>
								<text class="explain-content">{{item.content}}</text>
							</view>
						</view>
					</block>
				</view>
				<view style="height: 50rpx;"></view>
				<dev-iphone-bottom bgColor="#FDF3DE"></dev-iphone-bottom>
			</view>




		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	import DevButton from "../../../components/dev-button/dev-button";
	export default {
		components: {
			DevButton,
			uLoading,
			uLazyLoad,

		},
		data() {
			return {
				phone:'',
				showFlag: true,
				acceptFlag: false,
				certificateList: [],
				certificates: [],
				loadingone: false,
				pageCurrent: 1,
				pageSize: 10,
				province: '', //省
				city: '', //市
				district: '', //区
				counselorList: {},
				explainList: [],
				shopList: '',
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				backstyle: {
					color: '#ffffff',
					'white-space': 'nowrap',
					'font-size': '36upx'
				},
				navAllHeight: global.navAllHeight,
			}
		},
		onLoad(e) {
			let _this = this;
			this.$basejs.getCityInfo();
			this.getAdviserList();
			const info = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
			let loginKey = global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'
			const USER_TOKEN_BSY_Z = uni.getStorageSync(loginKey);
			const USER_INFO = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z');
			console.warn('fffff', info, USER_INFO, USER_TOKEN_BSY_Z);
		},
		// 关闭地理位置
		onUnload() {
			uni.$off('locationres', this.locationres)
		},
		methods: {
			addAdviserUser(adviserId){
					this.$loginl.post(global.apiUrls.addAdviserUser, {
						adviserId: adviserId,
					}).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '操作成功',
								duration: 2000
							});
							this.acceptFlag = false;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					});
			},
			selectAdvice(){
				let _this = this;
				this.$loginl.get(global.apiUrls.getAdviserByPhone + '?phone=' + this.phone, {})
						.then(res => {
							if(res.data.code == 1000){
								if(res.data.result){
									console.log(res.data.result,"健康顾问");
									this.showFlag = false;
									this.acceptFlag = true;
									if (res.data.result.remark) { //简介
										res.data.result.remark = res.data.result.remark.split(',')
									}
									// 对比几年经验
									var dateTimet = new Date(),
											dateTime = new Date(res.data.result.workingTime) // 将传进来的字符串或者毫秒转为标准时间
									var year = dateTime.getFullYear(),
											yeart = dateTimet.getFullYear();
									res.data.result.workingTime = yeart - year < 1 ? 1 : yeart - year;
									let certificate = [],
											certificateList = [];

									if (res.data.result.certificate) {
										certificate = JSON.parse(res.data.result.certificate)
									}
									for (let i = 0; i < certificate.length; i++) {
										if (certificate[i].showImage) {
											certificateList.push(certificate[i])
										}
									}
									_this.certificateList = certificateList
									_this.certificates = certificate
									console.log(certificate,'certificatecertificatecertificatecertificatecertificate----certificate')
									// end
									_this.counselorList = res.data.result;
							 	}
							}else {
								uni.showToast({
									title: res.data.message,
									icon: "none",
									duration: 2000
								});
							}
						})
			},
			information(e) {
				this.navAllHeight = e.navAllHeight;
			},

			navMajor(item) {
				uni.navigateTo({
					url: '/pages/subpackage/home/major/major?storeId=' + item.storeId
				})
			},
			//放大图片
			previewImg(item) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = item.showImage;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			// 获取地理位置
			locationres(data) {
				let _this = this;
				_this.province = data.province; //省
				_this.city = data.city; //市
				_this.district = data.district; //区
				_this.thisindex = data.thisindex ? data.thisindex : 0
				// 获取地理位置附近门店
				_this.storeMd(data.province, data.city, data.district, _this.pageCurrent, _this.pageSize);
				_this.reminder(2);
			},
			// 获取温馨提示
			reminder(instrType) {
				let _this = this;
				this.loadingone = true
				this.$shopnew.get(global.apiUrls.reminder + '?instrType=' + instrType, {})
					.then(res => {
						_this.loadingone = false
						if (res.data.code == 1000) {
							let explainList = res.data.result.instrDesc
							_this.explainList = explainList
						}
					}).catch(err => {})
			},
			// 获取附近门店
			storeMd(provinceName, cityName, countyName, pageCurrent, pageSize) {
				let _this = this;
				this.$shopnew.get(global.apiUrls.recommendStore + '?areaName=&cityName=' + cityName +
					'&countyName=' + countyName + '&keyword=&merchantName=&pageCurrent=' + pageCurrent + '&pageSize=' +
					pageSize +
					'&provinceName=' + provinceName + '&storeName=', {}).then(res => {
					let result = res.data.result;
					_this.shopList = result;
				})
			},
			// 拨打电话
			makePhoneCall(phoneNumber) {
				console.log(phoneNumber)
				wx.makePhoneCall({
					phoneNumber: phoneNumber + '' //仅为示例
				});
			},
			getAdviserList() {
				let _this = this;
				this.$loginl.get(global.apiUrls.getAdviserList + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
						.userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							console.log(res,"wwwwwewewewe")
							if(res.data.result){
								this.showFlag = false;
								if (res.data.result.remark) { //简介
									res.data.result.remark = res.data.result.remark.split(',')
								}
								// 对比几年经验
								var dateTimet = new Date(),
										dateTime = new Date(res.data.result.workingTime) // 将传进来的字符串或者毫秒转为标准时间
								var year = dateTime.getFullYear(),
										yeart = dateTimet.getFullYear();
								res.data.result.workingTime = yeart - year < 1 ? 1 : yeart - year;
								let certificate = [],
										certificateList = [];
								if (res.data.result.certificate) {
									certificate = JSON.parse(res.data.result.certificate)
								}
								for (let i = 0; i < certificate.length; i++) {
									if (certificate[i].showImage) {
										certificateList.push(certificate[i])
									}
								}
								_this.certificateList = certificateList
								_this.certificates = certificate

								// end
								_this.counselorList = res.data.result;
								console.log(_this.counselorList,'_this.counselorList======_this.counselorList')
							}else {
								// 获取地理位置
								uni.$on('locationres', this.locationres)
							}

						} else {
							// uni.showToast({
							// 	title: res.data.message,
							// 	icon: "none",
							// 	duration: 2000
							// });
							// 获取地理位置
							uni.$on('locationres', this.locationres)
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	//导航栏自定义背景
	.custom-background {
		background-image: url('https://bsyjk-pic.bsyjk.cn/counselor-topbg/87847BE002D0488FA7620DB8DB8371C4.png');
		background-size: 100% 100%;

		.false-background {
			width: 100%;
			position: fixed;
			background-image: url('https://bsyjk-pic.bsyjk.cn/counselor-topbg/87847BE002D0488FA7620DB8DB8371C4.png');
			z-index: 99;
			overflow: hidden;
		}
	}

	//查找顾问
	.find-consultants {
		width: 680rpx;
		height: 325rpx;
		margin-left: 35rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(173, 173, 173, 0.25);
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding: 48rpx 40rpx;

		.input-box {
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 600rpx;
			height: 94rpx;
			background: #F5F5F5;
			border-radius: 23rpx;
			border: 1rpx solid #E2E1E2;
		}
	}

	.recommend-md {
		width: 680upx;
		height: 470upx;
		background: #FFFFFF;
		box-shadow: 0px 2upx 20upx 0px rgba(173, 173, 173, 0.25);
		border-radius: 30upx;
		margin: -110upx auto 0;

		.recommend-title {
			height: 86upx;
			line-height: 86upx;
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 0 30upx;
		}

		.recommend-scroll {
			white-space: nowrap;
			display: flex;

			.shop-view {
				display: inline-block;
				width: 400upx;
				height: 343upx;
				border-radius: 16upx;
				margin-left: 30upx;
				position: relative;

				.shop-popup {
					width: 400upx;
					height: 124upx;
					padding: 14upx 20upx 0;
					box-sizing: border-box;
					background-color: rgba(0, 0, 0, 0.19);
					position: absolute;
					bottom: 0;
					border-radius: 0 0 16upx 16upx;

					.shop-imagename {
						display: flex;

						.shop-image {
							width: 54upx;
							height: 54upx;
						}

						.shop-name {
							font-size: 36upx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 50upx;
							padding-left: 11upx;
						}
					}

					.shop-dz {
						width: 340upx;
						font-size: 24upx;
						font-weight: 500;
						color: #E2E1E2;
						line-height: 33upx;
						padding-top: 10upx;
						position: relative;
						left: 10upx;
						display: flex;
						align-items: center;

						.drees-imgs {
							width: 22upx;
							height: 30upx;
						}

						.drees-texts {
							margin-left: 10upx;
						}
					}

					.shop-dz:before {
						content: '';
						width: 22upx;
						height: 30upx;
						position: absolute;
						top: 12upx;
						left: -30upx;
						background: url(https://bsyjk-pic.bsyjk.cn/mapicon/A6E46FC1C2584064BB7BB89A2B731B2D.png)no-repeat;
						background-size: 22upx 30upx;
					}
				}
			}


		}
	}

	.width621 {
		width: 621upx !important;
	}

	.explain-view {
		width: 680upx;
		margin: 87upx auto 0;
		background: url(https://bsyjk-pic.bsyjk.cn/counselorbg/B5BF68F9FFA74D598338CBA53C81C1C5.png)no-repeat;
		background-size: 680upx 100%;
		position: relative;
		padding: 60upx 0 72upx;
		box-sizing: border-box;

		.explain-f {
			width: 580upx;
			margin: 30upx auto 0;
			display: flex;

			.explain-num {
				width: 66upx;
				height: 50upx;
			}

			.explain-cview {
				width: 494upx;
				padding-left: 20upx;

				.explain-title {
					font-size: 30upx;
					font-weight: 500;
					color: #4A4A4A;
					line-height: 42upx;
				}

				.explain-content {
					font-size: 24upx;
					font-weight: 400;
					color: #4A4A4A;
					line-height: 33upx;
				}
			}
		}
	}

	.explain-view::before {
		content: '说明';
		width: 439upx;
		height: 127upx;
		position: absolute;
		background: url(https://bsyjk-pic.bsyjk.cn/counselortopbg/C412FCE41A264DF48CF32ABEFE5FAD3F.png)no-repeat;
		background-size: 439upx 127upx;
		left: 50%;
		transform: translateX(-50%);
		top: -54upx;
		font-size: 40upx;
		font-weight: 500;
		color: #825C37;
		line-height: 110upx;
		text-align: center;
	}



	//顾问信息
	.consultant-information {
		padding: 40rpx 20rpx;
		background-color: #FFFFFF;

		.right-data {
			width: 400rpx;
			height: 357rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 30rpx;

			position: relative;

			.phoen-icon{
				position: absolute;
				top: 0;
				right: 0;
			}


			.full-name {
				font-size: 38rpx;
				font-weight: 500;
				color: #000000;
			}
			.store-address {
				font-size: 28rpx;
				font-weight: 400;
				color: #4A4A4A;
			}

			.job-information {
				font-size: 24rpx;
				font-weight: 400;
				color: #9B9B9B;
				line-height: 33rpx;
			}

			.service-data{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.in-every-particular{
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
				}
				.score{
					font-size: 34rpx;
					font-weight: 500;
					color: #000000;
				}
				.company{
					font-size: 20rpx;
					font-weight: 400;
					color: #4A4A4A;
				}
				.service-type{
					font-size: 24rpx;
					font-weight: 400;
					color: #4A4A4A;
				}

			}
		}
	}

	//证书信息
	.certificate-management{
		padding: 43rpx 20rpx;
		background-color: #FFFFFF;
		.certificate-title{
			font-size: 34rpx;
			font-weight: 500;
			color: #000000;
			margin-bottom: 40rpx;
		}
		.certificate-list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.each-certificate{
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			width: 170rpx;
			height: 226rpx;
			background: #2EA7E0;
			border-radius: 15rpx;
			background-color: #EDF8FD;
			margin-bottom: 10rpx;
			.certificate-name{
				font-size: 24rpx;
				font-weight: 400;
				color: #2EA7E0;
				margin-top: 48rpx;
			}


		}
	}

</style>
